import {
  Component, OnInit, ViewEncapsulation, ViewChild, ElementRef,
  Renderer2
} from '@angular/core';
import {ImageServeService} from "@shared/service/image/image-serve.service";
import {SeedInfiniteScroll} from "@shared/components/infinite-scroll/seed-infinite-scroll/seed-infinite-scroll.component";
import {Subject} from "rxjs/Subject";
import * as API from "@api/index";
import {ActivatedRoute, Router} from "@angular/router";
import {RegisterCardDetailVO} from "../../../../interface/goods/goods.model";
import {GoodsTicketService} from "@goods/goods-ticket/goods-ticket.service";


@Component({
  selector: 'goods-ticket-service',
  templateUrl: './goods-ticket-service.component.html',
  styleUrls: ['./goods-ticket-service.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class GoodsTicketServiceComponent implements OnInit {
  @ViewChild(SeedInfiniteScroll) infiniteScroll;
  public ngUnsubscribe: Subject<void> = new Subject<void>();
  public cardBasicInfo: RegisterCardDetailVO;
  public params = {
    goodsCategoryCode: '',
    page: 1,
    rows: 10
  };
  public dataStore = {
    bigCardIsShow: false,
    theme: {},
    linearGradient: '',
  };
  // 0通用购买、1赛事、2培训、3票务 ,
  public themesStore = [{
    img: 'card_ordinary_gray.png',
    gradient: ['#d2d2d2', '#a1a1a1']
  }, {
    img: 'card_event_blue.png',
    gradient: ['#4292f3', '#1a65b8']
  }, {
    img: 'card_training_orange.png',
    gradient: ['#ffc857', '#fda112']
  }, {
    img: 'card_ticket_navy.png',
    gradient: ['#48839f', '#3e697e']
  }];
  // state (integer, optional): 服务卡状态:1未激活、2服务中（可使用、激活）、3已完成、4不可用、5已终止、6已冻结 ,
  public cardStatusStore = [{
    status : '',
    tip: '',
    color: '',
    icon: ''
  }, {
    status : '未激活',
    tip: '未激活',
    color: '#e94141',
    icon: 'spell_warning.png'
  }, {
    status : '可使用',
    tip: '可使用',
    color: '#70d77b',
    icon: 'pay_success.png'
  }, {
    status : '已完成',
    tip: '已完成',
    color: '#c1c1c1',
    icon: 'pay_success.png'
  }, {
    status : '不可用',
    tip: '不可用',
    color: '#c1c1c1',
    icon: 'fail.png'
  }, {
    status : '已终止',
    tip: '已终止',
    color: '#c1c1c1',
    icon: 'fail.png'
  }, {
    status : '已冻结',
    tip: '已冻结',
    color: '#c1c1c1',
    icon: 'spell_warning.png'
  }];
  public cardNo: string;
  constructor(
    public imgService: ImageServeService,
    private goodsTicketService: GoodsTicketService,
    private renderer: Renderer2,
    private ele: ElementRef,
    public router: Router,
    private route: ActivatedRoute) {
    this.route.queryParams.subscribe(params => {
      this.cardNo = params['cardNo'];
      console.log(this.cardNo);
      this.getTicketServiceCardDetail();
    });
  }

  /**
   * @description 获取服务卡详情
   * @author zhoukf1349
   * @date 2018-04-16
   */
  getTicketServiceCardDetail() {
    const cardNo = this.cardNo;
    this.goodsTicketService.getTicketServiceCardDetail(cardNo)
      .takeUntil(this.ngUnsubscribe)
      .subscribe(res => {
        if (res.result === '0' && res.data) {
          this.cardBasicInfo = res.data;
          this.handleDifferentCardType();
         this.initSetCardContainerHeight();
        }
      });
  }

  /*
   *@description 没支付跳转
   * @author zhoukf1349
   * @date 2018-04-13
   */
  goToPay() {
    this.router.navigate(['/payment/pay'], {
      queryParams: { orderNumber: this.cardBasicInfo.orderNo }
    });
  }
  /*
  *@description 查看取票人信息
  * @author zhoukf1349
  * @date 2018-04-13
  */
  goToCheckInfo() {
    this.router.navigate(['/goods/p/ticket-info'], { queryParams: { orderNumber: this.cardBasicInfo.orderNo}});
  }
  /*
  *@description 查看物流
  * @author zhoukf1349
  * @date 2018-04-13
  */
  checkTicketLogistics() {
    this.router.navigate(['/goods/p/check-logistics'] , {queryParams: {orderNumber: this.cardBasicInfo.orderNo}});
  }

  /**
   * @description 根据服务类型设置不同背景
   * @author ouyqx-691
   * @date 2018/03/10
   */
 handleDifferentCardType() {
    const imgOpts = this.themesStore;
    const cardType = 3;
    for (let i = 0; i < imgOpts.length; i++) {
      const item = imgOpts[i];
      if (cardType === i) {
        this.dataStore.theme = {
          img: this.imgService.getImage('manage/' + item.img),
          background: `-webkit-linear-gradient(right top,${item.gradient[0]},${ item.gradient[1]})`
        };
      }
    }
  }


  queryEle(selector) {
    return this.ele.nativeElement.querySelector(selector);
  }

  /**
   * @description 初始化卡容器高度
   * @author ouyqx-691
   * @date 2018/03/16
   */

  initSetCardContainerHeight() {
    const smallCard = this.queryEle('.small-card');
    if (smallCard) {
      this.setCardContainerHeight(smallCard.clientHeight);
    }
  }

  /**
   * @description 设置容器高度
   * @author ouyqx-691
   * @date 2018/03/16
   */
  setCardContainerHeight(height) {
    const cardContainer = this.queryEle('.card-container');
    this.renderer.setStyle(cardContainer, 'height', `${ height}px`);
  }

  /**
   * @description 处理触摸事件
   * @author ouyqx-691
   * @date 2018/03/16
   */
  handleToucheMoveEvent() {
    const content = this.queryEle('#seed-scroll-content');
    if (content) {
      let startX, startY;
      this.renderer.listen(content, 'touchstart', (e) => {
        startX = e.changedTouches[0].pageX;
        startY = e.changedTouches[0].pageY;

      });
      this.renderer.listen(content, 'touchmove', (e) => {
        if (!this.dataStore.bigCardIsShow) {
          return;
        }
        const endX = e.changedTouches[0].pageX;
        const endY = e.changedTouches[0].pageY;
        // 获取滑动距离
        const distanceX = endX - startX;
        const distanceY = endY - startY;
        // 判断滑动方向
        // const scrollTop = content.scrollTop;
        if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY < 0) {
          this.handleCardDisplay();
        }
      });
    }
  }

  /**
   * @description 处理卡片展开收起
   * @author ouyqx-691
   * @date 2018/03/16
   */
  handleCardDisplay() {
    const smallCard = this.queryEle('.small-card');
    const bigCard = this.queryEle('.big-card');
    const cardSwitch = this.queryEle('.card-switch');
    const smallCardHeight = smallCard.clientHeight;  // 默认取小卡高度
    let finallyCardContainerHeight;
    if (this.dataStore.bigCardIsShow) {
      // 收起大卡片
      this.dataStore.bigCardIsShow = false;
      this.renderer.addClass(bigCard, 'big-card-out');
      this.renderer.addClass(smallCard, 'small-card-in');
      this.renderer.removeClass(cardSwitch, 'open');
      finallyCardContainerHeight = smallCardHeight;
    } else {
      // 展示大卡片
      this.dataStore.bigCardIsShow = true;
      this.handleToucheMoveEvent();
      this.renderer.addClass(bigCard, 'big-card-in');
      this.renderer.removeClass(bigCard, 'big-card-out');
      this.renderer.addClass(smallCard, 'small-card-out');
      this.renderer.removeClass(smallCard, 'small-card-in');
      this.renderer.addClass(cardSwitch, 'open');
      finallyCardContainerHeight = bigCard.clientHeight;
    }
    this.setCardContainerHeight(finallyCardContainerHeight);
  }

  ngOnInit() {
  }
}
